import 'package:flutter/material.dart';

// 流式布局 wrap flow

class WrapFlowRoute extends StatefulWidget {
  @override
  _WrapFlowRouteState createState() => _WrapFlowRouteState();
}

class _WrapFlowRouteState extends State<WrapFlowRoute> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("流式布局 wrap flow"),
      ),
      body: Column(
        children: _getWidget(context),
      ),
    );
  }
}

List<Widget> _getWidget(BuildContext context){
  return [
    Text("Wrap"),
    Wrap(
      spacing: 8.0, //主轴（水平）方向间距
      runSpacing: 4.0, //纵轴（垂直）方向间距
      alignment: WrapAlignment.center, // 沿主轴方法居中
      children: <Widget>[
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("A"),
            ),
            label: new Text("姜总")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("M"),
            ),
            label: new Text("Hamilton")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("B"),
            ),
            label: new Text("Laurens")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("J"),
            ),
            label: new Text("姜总")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("A"),
            ),
            label: new Text("姜总")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.red,
              child: Text("M"),
            ),
            label: new Text("Hamilton")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text("B"),
            ),
            label: new Text("Laurens")),
        new Chip(
            avatar: new CircleAvatar(
              backgroundColor: Colors.green,
              child: Text("J"),
            ),
            label: new Text("姜总")),
      ],
    ),
    Text("Flow"),
    Flow(
      delegate: _TestFlowDelegate(margin: EdgeInsets.all(10.0)),
      children: <Widget>[
        new Container(width: 80.0, height: 80.0, color: Colors.red),
        new Container(width: 80.0, height: 80.0, color: Colors.green),
        new Container(width: 80.0, height: 80.0, color: Colors.blue),
        new Container(width: 70.0, height: 70.0, color: Colors.brown),
        new Container(width: 80.0, height: 80.0, color: Colors.purple),
        new Container(width: 80.0, height: 80.0, color: Colors.blue),
        new Container(width: 80.0, height: 80.0, color: Colors.brown),
        new Container(width: 80.0, height: 80.0, color: Colors.purple),
        new Container(width: 80.0, height: 80.0, color: Colors.greenAccent),
        new Container(width: 80.0, height: 80.0, color: Colors.purple),
        new Container(width: 80.0, height: 80.0, color: Colors.blue),
        new Container(width: 80.0, height: 80.0, color: Colors.brown),
        new Container(width: 80.0, height: 80.0, color: Colors.purple),
        new Container(width: 80.0, height: 80.0, color: Colors.greenAccent),
      ],
    ),
  ];
}

class _TestFlowDelegate extends FlowDelegate {
  EdgeInsets margin = EdgeInsets.zero;

  _TestFlowDelegate({this.margin});

  @override
  void paintChildren(FlowPaintingContext context) {
    double x = margin.left;
    double y = margin.top;
    // 计算每一个字widget的位置
    int childCount = context.childCount;
    double w = 0;
    for (int i = 0; i < childCount; i++) {
      w = context.getChildSize(i).width + x + margin.right;
      if (w < context.size.width) {
        context.paintChild(i,
            transform: new Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += context.getChildSize(i).height + margin.top + margin.bottom;
        //绘制字widget（有优化）
        context.paintChild(i,
            transform: new Matrix4.translationValues(x, y, 0.0));
        x += context.getChildSize(i).width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    // 指定Flow的大小
    return Size(double.infinity, 300.0);
  }

  @override
  bool shouldRepaint(FlowDelegate delegate) {
    return delegate != this;
  }
}
